<template>

  <div>
    <n-layout position="absolute">
      <n-layout-header style="height: 40px;" bordered>
        <CustomizeTitlebar />
      </n-layout-header>
      <n-layout has-sider position="absolute" style="top: 40px;">
        <n-layout-sider bordered>
          <n-menu :options="menuData" :default-expanded-keys="defaultExpandedKeys" accordion />
        </n-layout-sider>
        <n-layout>
          <RouterView></RouterView>
        </n-layout>
      </n-layout>

    </n-layout>
  </div>
</template>

<script setup lang="ts">
import { routesList } from "@/router/index"
import { h, ref } from "vue";
import { RouterLink } from "vue-router";
import CustomizeTitlebar from '@comp/CustomizeTitlebar.vue'
const defaultExpandedKeys = ref<[string]>(['braise'])
const menuData: any = []
for (let i = 0; i < routesList.length; i++) {
  const element = routesList[i];
  menuData.push({
    key: element.meta?.key, label: () => h(RouterLink, {
      to: {
        path: element.path,
      }
    },
      { default: () => element.meta?.label })
  })


}
</script>

<style scoped lang="less">
@spilc: 1rem;
@themeColor: #329ea3;
@hoverColor: lightcyan;


.layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .left {
    height: 100%;
    width: 200px;
  }

  .right {
    flex: 1;
    width: 100%;
    height: 100%;
  }
}
</style>
